<template>
  <div class="detail">
    <div class="main">
      <div class="left">
        <el-image style="height: 320px; width: 320px" :src="detailInfo.image" :fit="fill"> </el-image>
      </div>
      <div class="right">
        <el-space direction="vertical" :size="10" :fill="true" class="right_sp">
          <h1>{{ detailInfo.storeName }}</h1>
          <p>{{ detailInfo.shortName }}</p>
          <el-space :size="20">
            <el-space :size="1"
              ><span style="font-size: 12px">作者:</span><el-link style="font-size: 12px" type="primary">{{ detailInfo.translator }}</el-link></el-space
            >
            <el-space :size="1"
              ><span style="font-size: 12px">出版社:</span><el-link style="font-size: 12px" type="primary">{{ detailInfo.publishingHouse }}</el-link></el-space
            >
            <el-space
              ><span style="font-size: 12px">出版时间:</span><span style="font-size: 12px">{{ detailInfo.publishDate }} </span></el-space
            >
          </el-space>
          <el-space direction="vertical" :size="4" style="background: #fcfaf7" :fill="true" class="price1">
            <span class="p1">销售价</span>
            <el-space class="price2" :size="0" alignment="flex-end">
              <span class="p1">¥</span>
              <span class="p2">{{ detailInfo.vipPrice }}</span>
              <span class="p3">({{ detailInfo.discount * 10 }}折)</span>
            </el-space>
            <el-space class="dingjia" :size="0">
              <span class="p1">定价:</span>
              <span class="p2">¥{{ detailInfo.price }}</span>
            </el-space>
          </el-space>
          <el-space>
            <el-input-number v-model="num_shoop1" :min="1" controls-position="right" @change="handleChange" />
            <el-button type="danger" :icon="ShoppingBag" @click="toCart(detailInfo.id)">加入书包 </el-button>
            <el-button type="danger" plain @click="ToSubmit(detailInfo.id)">立即提交</el-button>
          </el-space>
        </el-space>
      </div>
    </div>
    <div class="bottom">
      <Bottom :data="detailInfo" />
    </div>
    <Submit v-model:visible="subVisible" @done="done" />
    <!-- 引入添加地址弹窗 -->
    <Address v-model:visible="visible" @done="done" />
  </div>
</template>
<script>
import { ShoppingBag } from '@element-plus/icons-vue'
import Bottom from './bottom'
import Submit from '@/components/submit'
import Address from '@/components/addAddress'
export default {
  name: 'detail',
  components: {
    ShoppingBag,
    Bottom,
    Submit,
    Address,
  },
  created() {
    console.log(this.$route.query.id)
    this.getDetailInfo(this.$route.query.id)
  },
  data() {
    return {
      num_shoop1: 1,
      info: {},
      detailInfo: {},
      subVisible: false,
      // 添加地址弹窗
      visible: false,
    }
  },
  methods: {
    getDetailInfo(id) {
      this.$http
        .get('product/detail/' + id)
        .then((res) => {
          this.detailInfo = res.data.data.productInfo
          this.info = res.data.data
          console.log(this.info)
        })
        .catch((e) => {
          console.log(e.message)
        })
    },
    // 加购
    toCart(id) {
      if (!window.sessionStorage.getItem('token')) return this.$message.warning('请先登录')
      this.$http
        .get('product/detail/' + id)
        .then((res) => {
          if (res.data.code === 200) {
            const attrId = res.data.data.productAttr[0].id
            this.$http
              .post('cart/save', { cartNum: this.num_shoop1, productId: id, productAttrUnique: attrId })
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success('加入书包成功')
                  this.num_shoop1 = 1
                  this.$http
                    .get('cart/count', {
                      params: {
                        numType: true,
                        type: 'total',
                      },
                    })
                    .then((res) => {
                      if (res.data.code === 200) {
                        console.log(res.data.data)
                        this.setSessionItem('cartNum', res.data.data.count)
                      } else {
                        this.$message.error(res.data.message)
                      }
                    })
                    .catch((e) => {
                      this.$message.error(e.message)
                    })
                } else {
                  this.$message.error(res.data.message)
                }
              })
              .catch((e) => {
                this.$message.error(e.message)
              })
          }
        })
        .catch((e) => {
          console.log(e.message)
        })
    },
    // 立即提交
    ToSubmit(id) {
      if (!window.sessionStorage.getItem('token')) return this.$message.warning('请先登录')
      this.$http.get('address/default').then((res) => {
        if (res.data.code === 200) {
          if (res.data.data === null) {
            this.$message.warning('请先添加收货地址')
            this.visible = true
            return
          }
          if (Object.keys(res.data.data).length !== 0) {
            let data = {
              addressId: '',
              preOrderType: 'shoppingCart',
              remark: '',
              orderDetails: [{ shoppingCartId: '' }],
            }
            // 第一步获取默认地址
            this.$http
              .get('address/default')
              .then((res) => {
                if (res.data.code === 200) {
                  data.addressId = res.data.data.id
                  // 加购商品
                  this.$http
                    .post('cart/save', { cartNum: this.num_shoop1, productId: id, productAttrUnique: this.info.productAttr[0].id })
                    .then((res) => {
                      this.num_shoop1 = 1
                      if (res.data.code === 200) {
                        // 加购成功后 获取购物车列表
                        this.$http
                          .get('cart/list', {
                            params: {
                              limit: 100,
                              page: 1,
                            },
                          })
                          .then((res) => {
                            if (res.data.code === 200) {
                              res.data.data.list.forEach((item) => {
                                if (item.productId === id) {
                                  data.orderDetails[0].shoppingCartId = item.id
                                }
                              })
                              // 提交
                              this.$http
                                .post('order/pre/UnifiedOrder', data)
                                .then((res) => {
                                  if (res.data.code === 200) {
                                    this.$message({
                                      message: '订单已提交，请联系客服',
                                      type: 'success',
                                      duration: 10000,
                                    })
                                    this.$http
                                      .get('cart/count', {
                                        params: {
                                          numType: true,
                                          type: 'total',
                                        },
                                      })
                                      .then((res) => {
                                        if (res.data.code === 200) {
                                          this.setSessionItem('cartNum', res.data.data.count)
                                        } else {
                                          this.$message.error(res.data.message)
                                        }
                                      })
                                      .catch((e) => {
                                        this.$message.error(e.message)
                                      })
                                  } else {
                                    this.$message.error(res.data.message)
                                  }
                                })
                                .catch((e) => {
                                  this.$message.error(e.message)
                                })
                            }
                          })
                      } else {
                        this.$message.error(res.data.message)
                      }
                    })
                    .catch((e) => {
                      this.$message.error(e.message)
                    })
                } else {
                  this.$message.error(res.data.message)
                }
              })
              .catch((e) => {
                this.$message.error(e.message)
              })
          }
          //  else {
          //   this.$message.warning('请先添加收货地址')
          //   this.visible = true
          // }
        }
      })
    },
    done() {
      this.visible = false
    },
  },
}
</script>

<style scoped lang="scss">
.detail {
  @include margin(1200px);
  .main {
    display: flex;
    justify-content: space-between;
    .left {
      width: 320px;
    }
    .right {
      width: 860px;
      .right_sp {
        width: 100%;
        h1 {
          line-height: 24px;
          max-height: 48px;
          overflow: hidden;
          color: #323232;
          font-size: 18px;
          font-family: 'Verdana', 'Microsoft Yahei';
          font-weight: 700;
        }
        p {
          padding-top: 6px;
          max-height: 76px;
          color: #323232;
          overflow: hidden;
          font-size: 16px;
          line-height: 24px;
          font-family: '宋体';
        }
        .price1 {
          padding: 10px 0 8px 8px;
          .p1 {
            color: #8f8f8f;
            font-weight: normal;
            font-family: verdana;
            font-size: 12px;
          }
          .price2 {
            .p2 {
              font-size: 32px;
              color: #e52222;
              font-family: verdana;
              line-height: 32px;
            }
            .p1 {
              color: #e52222;
              font-size: 14px;
              font-family: verdana;
            }
            .p3 {
              color: #e52222;
              font-size: 14px;
              font-family: verdana;
              margin-left: 20px;
            }
          }
          .dingjia {
            margin-top: 6px;
            .p1 {
              font-family: verdana;
              font-size: 14px;
              line-height: 24px;
              color: #969696;
            }
            .p2 {
              font-family: verdana;
              font-size: 12px;
              line-height: 12px;
              color: #969696;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
  }
}
</style>
